<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Coffee</title>
	<!-- 图标  -->
	<link rel="shortcut icon" href="{{ asset('/images/deng.jpg') }}" type="image/x-icon" />
	<!-- 页面全局 css   -->
	<link rel="stylesheet" href="{{ asset('/css/style.css') }}" />
	<!--  bootstrap css   -->
	<link rel="stylesheet" href="{{ asset('/bootstrap/css/bootstrap.min.css') }}" />
	<!--  bootstrap js   -->
	<script src="{{ asset('/bootstrap/js/jquery.min.js') }}" ></script>
	<script src="{{ asset('/bootstrap/js/bootstrap.min.js') }}" ></script>
	<script type="text/javascript" src="{{ asset('/js/jquery-1.8.3.min.js') }}"></script>
	<!-- 分类导航js   -->
	<script type="text/javascript" src="{{ asset('/js/jquery.easing.1.3.js') }}"></script>
	<script type="text/javascript" src="{{ asset('/js/script.js') }}"></script>
	
</head>

<body class="home">


<div>
	
	<header style="height:160px;margin:0 auto;" >
		
		<!-- 导航 -->
		<div class="top-nav">
			<!-- 导航 -->
			<nav>
				<ul>
					<li><a href="{{ url('/') }}" style="font-size:15px;">早餐</a></li>
					<li><a href="{{ url('/coffee') }}" style="font-size:15px;" >饮品</a></li>
					<li><a href="" style="font-size:15px;" >联系我们</a></li>
				</ul>
			</nav>
			<!-- 搜索 -->
			<form class="search-form" method="post" action="{{ url('/search_listing') }}" >
				{{ csrf_field() }}
				<input type="text" class="search" name="keywords" />
				<input type="submit" class="search-submit" />
			</form>
		</div>

		<!-- 店名  -->
		<div style='float:left;margin-left:-130px;margin-top:-15px;width:200px;height:90px;color:white;font:35px/20px "宋体";' >
		{!! $web->name or '' !!}
		</div>
		
		<!-- 时钟 -->
		<div style='float:left;width:150px;height:100px;margin-top:-45px;'>
			<div id="myclock">
				<canvas width="0" height="0"></canvas>
			</div>
			<script language="javascript" type="text/javascript" src="{{ asset('/js/clock/jquery.min.js') }}" ></script>
			<script language="javascript" type="text/javascript" src="{{ asset('/js/clock/jquery.thooClock.js') }}"></script>  
			<script language="javascript">
				var intVal, myclock;

				$(window).resize(function(){
					window.location.reload()
				});

				$(document).ready(function(){

					var audioElement = new Audio("");

					//clock plugin constructor
					$('#myclock').thooClock({
						// size:$(document).height()/4.5,
						size:150,
						onAlarm:function(){
							//all that happens onAlarm
							$('#alarm1').show();
							alarmBackground(0);
							//audio element just for alarm sound
							document.body.appendChild(audioElement);
							var canPlayType = audioElement.canPlayType("audio/ogg");
							if(canPlayType.match(/maybe|probably/i)) {
								audioElement.src = 'alarm.ogg';
							} else {
								audioElement.src = 'alarm.mp3';
							}
							// erst abspielen wenn genug vom mp3 geladen wurde
							audioElement.addEventListener('canplay', function() {
								audioElement.loop = true;
								audioElement.play();
							}, false);
						},
						showNumerals:true,
						brandText:'AM七点半',
						brandText2:'',
						onEverySecond:function(){
							//callback that should be fired every second
						},
						//alarmTime:'15:10',
						offAlarm:function(){
							$('#alarm1').hide();
							audioElement.pause();
							clearTimeout(intVal);
							$('body').css('background-color','white');
							//$('body').css('background-color','#FCFCFC');
							//color:white;
						}
					});

				});



				$('#turnOffAlarm').click(function(){
					$.fn.thooClock.clearAlarm();
				});


				$('#set').click(function(){
					var inp = $('#altime').val();
					$.fn.thooClock.setAlarm(inp);
				});

				
				function alarmBackground(y){
						var color;
						if(y===1){
							color = '#CC0000';
							color = 'white';
							y=0;
						}
						else{
							color = '#FCFCFC';
							color = 'white';
							y+=1;
						}
						$('body').css('background-color',color);
						intVal = setTimeout(function(){alarmBackground(y);},100);
				}
			</script>
		</div>
		
		<!-- 分类导航 -->
		<nav class="main-menu" >
			<ul>
				@forelse( $common as $category )
					<li><a href="{{ url('/cate_listing') }}/{{ $category->id }}">{{ $category->name }}</a></li>
				@empty
				@endforelse
				<li id="lava-elm"></li>
			</ul>
		</nav>
		
	</header>
	
</div>